<template>
    <van-col span="12">
        <div class="uni-view" @click="goProductDetails">
            <div class="uni-view-img">
                <van-image width="45.866667vw" height="45.866667vw" fit="cover" lazy-load
                    :src="props.item.goods_images[0]" />
            </div>
            <div class="uni-view-title van-multi-ellipsis--l2">
                <span class="view-certificate .font-size-26">现金券</span><span class="font-size-32">{{ props.item.name
                    }}</span>
            </div>
            <div class="uni-view-price font-size-36"><span class="font-weight-bold text-red">￥{{
                    props.item.price}}</span></div>
        </div>
    </van-col>
</template>

<script setup>
import { useRouter } from 'vue-router'
let props = defineProps({
    item: {
        type: Object,
    }
});

let router = useRouter();
let goProductDetails=()=>{
    router.push({
        path: '/productDetails',
        query: {
            id: props.item.id
        }
    })
}
</script>

<style lang="scss" scoped>
.uni-view {
    height: 576px;
    border-radius:10px;
    background: var(--white);
    box-shadow: 0px 3px 6px hsla(0, 0%, 60%, .16);
    box-sizing: border-box;overflow: hidden;
}
.uni-view-img{
    width: 344px; height: 344px;background-color: aquamarine; margin-bottom: 20px;
}
.uni-view-title{line-height: 180%;height: 120px;}
.view-certificate{padding: 8px 16px;background-color: antiquewhite; border-radius: 12px 0px 12px 0px; margin-right: 10px;}
.uni-view-price,.uni-view-title{padding:5px 20px;}
</style>